<template>
  <div class="desk-wrapper">
    <div class="desk-title" v-if="title">{{ title }}</div>
    <div class="desk-body">
      <div left :style="{width:treeWidth+'px'}">
        <!-- 目录 -->
        <tree-menu ref="tree" :treeData="treeData" :option="treeOption" isDrag iconDef
          @node-click="treeNode" @dragHandle="$emit('dragHandle',arguments[0])">
          <template #icon>
            <slot name="treeIcon"></slot>
          </template>
        </tree-menu>
      </div>
      <c-drag @widthChange="widthChange"></c-drag>
      <div right :style="{width:(screenWidth-treeWidth-43)+'px'}">
        <!-- 文件列表 -->
        <c-table ref="table" :tableData="tableData" :headData="headData" :headList="headList"
          :sortData="tableSort" :tableMore="tableMore" :butData="butData" :selection="tableSelection"
          :pageConf="tablePageConf" :searchData="tableSearch"
          @tableMoreEvent="tableMoreEvent" @buttonEvent="buttonEvent" @sortChange="tableSortChange"
          @selectionChange="tableSelectionEvent" @pageChange="pageChange">
          <!-- 允许自定义-功能区 -->
          <template #top><slot name="table_top"></slot></template>
          <!-- 允许自定义-新增功能 -->
          <template #topAppend><slot name="table_topAppend"></slot></template>
          <!-- 允许自定义-新增功能 -->
          <template #search><slot name="table_search"></slot></template>
          <!-- 允许自定义搜索框-前内容 -->
          <template #search_prepend><slot name="table_search_prepend"></slot>
          </template>
          <!-- 允许自定义列表内元素 统一配置 table -->
          <template #default="{row, column, $index}">
            <slot name="table" :row="row" :column="column" :$index="$index"></slot>
          </template>
          <!-- 允许自定义列表头元素 统一配置 table_header -->
          <template #header="{column, $index}">
            <slot name="table_header" :column="column" :$index="$index"></slot>
          </template>
          <!-- 允许自定义列表内元素 table + key -->
          <template v-for="key in headKeys" #[key]="{row, column, $index}">
            <slot :name="'table_' + key" :row="row" :column="column" :$index="$index"></slot>
          </template>
          <!-- 允许自定义列表头元素 table_ + [key] + _header -->
          <template v-for="key in headKeys" #[attrHeader(key)]="{column, $index}">
            <slot :name="'table_'+key+'_header'" :column="column" :$index="$index"></slot>
          </template>
        </c-table>
      </div>
    </div>
  </div>
</template>
<script>
import treeMenu from './tree' // 树插件
import cTable from './table' // table插件
import cDrag from './cDrag' // 拖动插件

// import { Button as ElButton } from 'element-ui'
// import { Button as ElButton, Form as ElForm, FormItem as ElFormItem } from 'element-ui'
export default {
  name: 'treeTable',
  props: {
    // 树数据
    treeData: Array,
    // 树配置
    treeOption: Object,
    // talbe数据
    tableData: Array,
    // 表头数据
    headData: Object,
    // 表头-配置模式
    headList: Array,
    // 列表-功能区
    butData: {
      type: [Boolean, Array],
      default: null
    },
    // 列表-更多-功能区
    tableMore: Array,
    // 列表-排序配置
    tableSort: Array,
    // 列表-是否开启多选
    tableSelection: {
      type: [Boolean, Object]
    },
    // 列表-搜索框
    tableSearch: { // 搜索-数据配置
      type: [Boolean, Object]
    },
    // 列表-分页配置
    tablePageConf: Object,
    // 是否启用-table拖拽功能
    tableIsDrag: Boolean,
    // 标题
    title: {
      type: String,
      default: '资源管理器'
    }
  },
  data() {
    return {
      // 目录宽度      设备宽度
      treeWidth: 300, screenWidth: 0,
      // 当前文件夹
      currFolder: null
    }
  },
  computed: {
    offActive() {
      let bool = false
      if (this.treeOption.offActive) {
        bool = true
      }
      return bool
    },
    headKeys() {
      if (this.headData) { // 简单配置
        return Object.values(this.headData)
      }
      if (this.headList) { // 复杂配置
        return this.headList.map(o => o.prop)
      }
      return []
    }
  },
  components: {
    treeMenu, cTable, cDrag
  },
  created() {
    this.screenWidth = window.innerWidth
  },
  mounted() {
    // 启用-table 拖拽
    if (this.tableIsDrag) {
      const table = this.$refs.table.$el
      table.ondragover = (e) => {
        e.preventDefault()
      }
    }
  },
  methods: {
    // 节点点击-回调
    treeNode(row) {
      this.currFolder = row.row // 当前folder
      this.$emit('treeNode', row)
    },
    // 监听-拖动改变 宽度
    widthChange(w) {
      this.treeWidth -= w
      if (this.treeWidth < 200) {
        this.treeWidth = 200
      }
      if (this.treeWidth > 700) {
        this.treeWidth = 700
      }
    },
    // 按钮功能区-回调事件
    buttonEvent(row) {
      this.$emit('buttonEvent', row)
    },
    // table更多操作
    tableMoreEvent(row) {
      this.$emit('tableMoreEvent', row)
    },
    // table多选操作
    tableSelectionEvent(row) {
      this.$emit('tableSelectionEvent', row)
    },
    // table分页-回调
    pageChange(row) {
      this.$emit('tablePageChange', row)
    },
    // 排序-远程自定义
    tableSortChange(row) {
      this.$emit('tableSortChange', row)
    },
    /** 方法供 - 父组件使用 */
    // tree 目录点击
    treeToggle(row, index, type, currFolder) {
      this.$refs.tree.toggle(row, index, type, currFolder)
    },
    // table 设置选中值 type 1 单选 2 多选
    tableSetSelection(type, row, status) {
      this.$refs.table.setSelection(type, row, status)
    },
    // table 打开文件夹 - tree 树也打开
    tableOpenFolder(folderId) {
      const chKey = this.treeOption ? this.treeOption.children : 'children'
      const children = this.currFolder[chKey]
      const index = children.findIndex(o => o.id == folderId)
      if (index >= 0) {
        this.currFolder.show = true // 打开当前文件夹
        this.$refs.tree.toggle(children[index], index, 1, children) // 点击-对应文件夹
        // this.$refs.tree.toggle(children[index], index, 2, children) // 打开-对应文件夹
        return true
      } else {
        return false
      }
    },
    // 插槽-动态参数处理
    attrHeader(key) {
      return key + '_header'
    },
    // 拖动初始化
    dragInit() {
      const table = this.$refs.table.$el
      const trs = table.querySelectorAll('.el-table__body-wrapper tbody .el-table__row')
      if (trs.length) {
        trs.forEach((el, ind) => {
          el.setAttribute('draggable', true)
          el.ondragstart = (event) => {
            const e = event || window.event
            const obj = this.tableData[ind]
            e.dataTransfer.setData('data', JSON.stringify(obj))
          }
        })
      }
    }
  },
  filters: {
  },
  watch: {
    // table-数据
    tableData(newVal) {
      if (this.tableIsDrag && newVal && newVal.length) {
        this.$nextTick(_ => {
          this.dragInit()
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
// 桌面-资源管理
.desk-wrapper{
  .desk-title{
    text-align: center;
    height: 50px;
    line-height: 50px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #e9f1f7;
    margin-bottom: -1px;
  }
  // 内容区
  .desk-body{
    height: 80vh;
    border: 15px solid #e9f1f7;
    border-top: none;
    flex: 1;
    display: flex;
    // 左边-目录结构
    &>div[left]{
      overflow: auto;
      padding: 10px;
      position: relative;
    }
    // 右边-子文件或目录
    &>div[right]{
      overflow: auto;
      padding: 10px;
      position: relative;
    }
  }
}
</style>
